<template>
  <div class="app-container" style="margin-left: 20px">
    <div class="filter-container">
      <el-select
        v-model="listQuery.group_name"
        clearable
        placeholder="业务线"
        @change="getProjectN"
      >
        <el-option
          v-for="item in group_namelist"
          :key="item.group_name"
          :label="item.group_name"
          :value="item.group_id"
        />
      </el-select>
      <el-select
        v-model="listQuery.project_name"
        style="margin-left: 20px"
        clearable
        placeholder="项目"
        @change="handleFilter"
      >
        <el-option
          v-for="item in project_namelist"
          :key="item.project_name"
          :label="item.project_name"
          :value="item.project_name"
        />
      </el-select>
      <el-select
        v-model="listQuery.status"
        style="margin-left: 20px"
        clearable
        placeholder="状态"
        @change="handleFilter"
      >
        <el-option
          v-for="item in caseOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-input
        v-model="listQuery.project_str"
        placeholder="项目名称"
        clearable
        style="margin-left: 20px; width: 200px"
        @blur="handleFilter"
        @keyup.enter.native="handleFilter"
        @change="handleFilter"
      />
      <el-date-picker
        v-model="dateValue"
        type="daterange"
        style="margin-left: 20px"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="timeFilter"
      />
      <el-row style="margin-top: 10px">
        <el-button
          :type="'primary'"
          @click="demandFilter(1)"
        >标准需求</el-button>
        <el-button
          :type="'success'"
          @click="demandFilter(2)"
        >验收需求</el-button>
        <el-button
          :type="'danger'"
          @click="demandFilter(3)"
        >生产事故</el-button>
        <el-button
          :type="'warning'"
          @click="demandFilter(4)"
        >线上bug</el-button>
        <el-button :type="'info'" @click="demandFilter(5)">紧急发版</el-button>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-button @click="addproject">新增项目</el-button>
      </el-row>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column v-if="true" label="PID" width="70px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.pro_id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showReviewer"
        label="业务"
        width="80px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.group_name }}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="showReviewer"
        label="项目"
        width="100px"
        align="center"
      >

        <template slot-scope="{ row }">
          <span>{{ row.project_name }}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="showReviewer"
        label="版本"
        width="150px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.version }}</span>
        </template>
      </el-table-column>
      <el-table-column label="需求类型" width="100px" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.demand_type == 1"
            effect="plain"
            :type="'primary'"
            disable-transitions
          >标准需求</el-tag>
          <el-tag
            v-else-if="scope.row.demand_type == 2"
            effect="plain"
            :type="'success'"
          >验收需求</el-tag>
          <el-tag
            v-else-if="scope.row.demand_type == 3"
            effect="plain"
            :type="'danger'"
          >生产事故</el-tag>
          <el-tag
            v-else-if="scope.row.demand_type == 4"
            effect="plain"
            :type="'warning'"
          >线上bug</el-tag>
          <el-tag
            v-else-if="scope.row.demand_type == 5"
            effect="plain"
            :type="'info'"
          >紧急发版</el-tag>
          <!-- <el-tag v-else style="margin-left: 10px">接口自动化</span> -->
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100px" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status == 1"
            effect="plain"
            :type="'success'"
            disable-transitions
          >测试中</el-tag>
          <el-tag
            v-else-if="scope.row.status == 2"
            effect="plain"
            :type="'info'"
          >测试完成</el-tag>
          <el-tag
            v-else-if="scope.row.status == 3"
            effect="plain"
            :type="'danger'"
          >已上线</el-tag>
          <!-- <el-tag v-else style="margin-left: 10px">接口自动化</span> -->
        </template>
      </el-table-column>
      <el-table-column label="完成时间" width="130px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.end_time | parseTime("{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上线时间" width="130px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.online_time | parseTime("{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showReviewer"
        label="bug率"
        width="80px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.bug_rate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showReviewer"
        label="修复率"
        width="80px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.fix_rate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showReviewer"
        label="无效修改率"
        width="100px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.unfix_rate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showReviewer"
        label="发布成功率"
        width="100px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.online_rate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showReviewer"
        label="bug总数"
        width="80px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.bug_sum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showReviewer"
        label="创建人"
        width="80px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.creater }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="230px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="info" size="mini" @click="viewproject(row)">详情</el-button>
          <el-button type="success" size="mini" @click="operation_look(row)">
            操作
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page_num"
      :limit.sync="listQuery.page_per"
      @pagination="getList"
    />
    <mini
      v-if="dialogAdd.show"
      ref="popBox"
      :edit="edit"
      :size-forms="sizeForms"
      destroy-on-close="true"
      :title="edit ? '项目编辑' : '新增项目'"
      @closePop="closePop"
    />
    <el-dialog
      modal
      :visible.sync="user_look"
      width="35%"
      :before-close="closePop"
    >
      <el-row :gutter="10">
        <el-col :span="10">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>项目操作</span>
            </div>
            <div align="center">
              <el-button type="success" size="mini" @click="tableRowRenew()">
                更新
              </el-button>
              <el-button type="primary" size="mini" @click="tableRowEdit()">
                编辑
              </el-button>
              <el-button type="danger" size="mini" @click="tableRowDelete()">
                删除
              </el-button>
            </div>

          </el-card>

        </el-col>
        <el-col :span="7">
          <el-card class="box-card-mini">
            <div slot="header" class="clearfix">
              <span>提测邮件</span>
            </div>
            <div align="center">
              <el-button type="primary" size="mini" @click="tableRowReplyEdit()">
                编辑
              </el-button>
              <el-button type="success" size="mini" @click="tableRowReplySend()">
                发送
              </el-button>
            </div>

          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card class="box-card-mini">
            <div slot="header" class="clearfix">
              <span>验收报告</span>
            </div>
            <div align="center">
              <el-button type="primary" size="mini" @click="tableRowCheckEdit()">
                编辑
              </el-button>
              <el-button type="success" size="mini" @click="tableRowCheckEditSend()">
                发送
              </el-button>
            </div>

          </el-card>
        </el-col>

      </el-row>
    </el-dialog>

    <Details
      v-if="detailsshow"
      ref="popBox"
      :pro-info="pro_info"
      destroy-on-close="true"
      @closePop="closePop"
    />

    <miniReply
      v-if="dialogReply.show"
      ref="popBox"
      :edit="reply_edit"
      :reply-forms="replyForms"
      destroy-on-close="true"
      :title="'回复提测'"
      @closePop="closePop"
    />
    <miniCheck
      v-if="dialogCheck.show"
      ref="popBox"
      :edit="check_edit"
      :check-forms="checkForms"
      destroy-on-close="true"
      :title="'验收报告'"
      @closePop="closePop"
    />
  </div>
</template>
<script>
import { Message } from 'element-ui'
import mini from './components/edit'
import Details from './components/details'
import miniReply from './components/edit_reply'
import miniCheck from './components/edit_check'
import { getToken } from '@/utils/auth'
import { getInfo } from '@/api/user'
import {
  getProjectList,
  deleteProject,
  getReplyTest,
  sendTestEmail,
  sendReportEmail,
  getReportData,
  venusFirstLevel,
  mantisFirstLevel,
  addUpdate
} from '@/api/quality'
import { getGroupName, getProjectName } from '@/api/report'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

const caseOptions = [
  { value: 1, label: '测试中' },
  { value: 2, label: '测试完成' },
  { value: 3, label: '已上线' }
]
const demandOptions = [
  { value: 1, label: '标准需求' },
  { value: 2, label: '验收需求' },
  { value: 3, label: '生产事故' },
  { value: 4, label: '线上bug' },
  { value: 5, label: '紧急发版' }
]

export default {
  name: 'ComplexTable',
  components: {
    Pagination,
    mini,
    Details,
    miniReply,
    miniCheck
  },
  data() {
    return {
      user_name: '',
      detailsshow: false,
      dialogAdd: {
        show: false
      },
      dialogReply: {
        show: false
      },
      dialogCheck: {
        show: false
      },
      user_look: false,
      upower: 0,
      tableKey: 0,
      list: null,
      total: 0,
      row_one: '',
      edit: false,
      reply_edit: false,
      check_edit: false,
      listLoading: true,
      listQuery: {
        group_name: '',
        project_name: '',
        page_num: 1,
        page_per: 10,
        start_time: '',
        end_time: '',
        demand_type: '',
        status: '',
        project_str: ''
      },
      dateValue: '',
      group_namelist: '',
      venus_f_list: '',
      mantis_f_list: '',
      project_namelist: '',
      caseOptions,
      demandOptions,
      // deployOptions,
      showReviewer: true,
      sizeForms: {
      },
      replyForms: {},
      checkForms: {},
      pro_info: {}
    }
  },
  created() {
    this.getGroupN()
    // this.getList()
    this.getVenusFirstLevel()
    this.getMantisFirstLevel()
  },
  methods: {
    closePop(formName) {
      this.row_one = ''
      this.user_look = false
      this.dialogAdd.show = false
      this.detailsshow = false
      this.dialogReply.show = false
      this.dialogCheck.show = false
      this.sizeForms = {

      }
      this.replyForms = {}
      this.checkForms = {}
    },
    getList() {
      getInfo(getToken()).then((res) => {
        this.upower = res.data.access_level
        this.user_name = res.data.name
      })
      this.listLoading = true
      getProjectList(this.listQuery).then((response) => {
        this.list = response.data.items
        this.total = response.data.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    getVenusFirstLevel() {
      venusFirstLevel({ mgrop: '' })
        .then((res) => {
          this.venus_f_list = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getMantisFirstLevel() {
      mantisFirstLevel({ vgoup: '' })
        .then((res) => {
          this.mantis_f_list = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getGroupN() {
      getGroupName().then((res) => {
        this.group_namelist = res.data
      }).catch((error) => {
        Message.error(error.msg || error.message || error.value)
      })
      this.getList()
    },
    getProjectN(groupId) {
      // groudId && (this.listQuery.project_name = '')
      this.listQuery.project_name = ''
      if (!groupId) {
        this.project_namelist = ''
        // this.listQuery.project_name = ''
        this.getList()
        return
      }
      for (var i in this.group_namelist) {
        if (this.group_namelist[i].group_id === groupId) {
          this.listQuery.group_name = this.group_namelist[i].group_name
        }
      }
      getProjectName(groupId)
        .then((res) => {
          this.project_namelist = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
      this.getList()
    },
    timeFilter() {
      if (this.dateValue === null) {
        this.listQuery.start_time = ''
        this.listQuery.end_time = ''
      } else {
        this.listQuery.start_time = this.dateValue[0]
        this.listQuery.end_time = this.dateValue[1]
      }

      this.getList()
    },
    demandFilter(dtype) {
      this.listQuery.demand_type = dtype
      this.getList()
    },
    handleFilter(groudId) {
      // this.listQuery.page_num = 1
      // this.listQuery.page_per = 10
      this.getList()
    },
    addproject() {
      if (this.power()) {
        this.edit = false
        // this.sizeForms.pquest = " 请输入\n详细地址"
        this.dialogAdd.show = true
        this.sizeForms.venus_f_list = this.venus_f_list
        this.sizeForms.mantis_f_list = this.mantis_f_list
        this.sizeForms.edit = this.edit
        this.sizeForms.creater = this.user_name
      }
      //    setTimeout(()=>{
      //   this.$nextTick(()=>{
      //   var textareatext = document.querySelectorAll('textarea')

      //   for(var i=0;i < textareatext.length;i++){
      //     textareatext[i].setAttribute(this.sizeForm.pquest,"请输入\n详细地址")

    //   }
    // },1000)
    // })
    },
    power() {
      if (this.upower >= 70) {
        return true
      } else {
        Message.error('权限不足')
        return
      }
    },
    operation_look(row) {
      if (this.power()) {
        this.user_look = true
        this.row_one = row
      }
    },
    tableRowEdit() {
      this.edit = true
      this.sizeForms = this.row_one
      this.sizeForms.status = this.row_one.status
      this.sizeForms.edit = this.edit
      this.sizeForms.venus_f_list = this.venus_f_list
      this.sizeForms.mantis_f_list = this.mantis_f_list
      this.dialogAdd.show = true
      this.sizeForms.creater = this.user_name
      // this.sizeForms.relation = true
    },
    tableRowRenew() {
      this.listLoading = true
      addUpdate({ 'pid': this.row_one.pro_id }).then((res) => {
        Message.success(res.message)
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.2 * 1000)
        this.getList()
      }).catch((error) => {
        Message.error(error.msg || error.message || error.value)
      })
    },
    tableRowDelete() {
      deleteProject(this.row_one.pro_id).then((res) => {
        Message.success(res.message)
        this.getList()
      })
    },
    tableRowReplyEdit() {
      this.reply_edit = true
      this.tableRowReplyEditInfo(this.row_one.pro_id)
      this.dialogReply.show = true
    },
    tableRowReplyEditInfo(id) {
      getReplyTest(id)
        .then((res) => {
          this.replyForms = res.data
          this.replyForms.id = id
        }).catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    tableRowCheckEditSend() {
      sendReportEmail({ pid: this.row_one.pro_id })
        .then((res) => {
          Message.success(res.message)
        }).catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    tableRowReplySend() {
      sendTestEmail({ 'pid': this.row_one.pro_id })
        .then((res) => {
          Message.success(res.message)
        }).catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    tableRowCheckEdit() {
      this.check_edit = true
      this.tableRowCheckEditInfo(this.row_one.pro_id)
    },
    viewproject(row) {
      this.detailsshow = true
      this.pro_info = { pid: row.pro_id }
    },
    tableRowCheckEditInfo(id) {
      getReportData(id).then((res) => {
        if (res.code !== 40000) {
          this.checkForms = res.data
          console.log(res.data)
          if (res.data.begin_time && res.data.end_time) {
            this.checkForms.begin_time = new Date(res.data.begin_time)
            this.checkForms.end_time = new Date(res.data.end_time)
            this.checkForms.id = id
            this.dialogCheck.show = true
          } else {
            Message.error('该项目无测试结束时间，无法进行发送验收报告！')
          }
        }
      })
    }
  }
}
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
.box-card-mini {
  width: 100%;
}
</style>
